<template>
    <div class="rightThree">
        <ThemeTitle :title="title"/>
        <div class="transState">
            <div class="twoMsg">
                <div class="road">
                    <span>高速公路：</span>
                    <span>1000+km</span>
                </div>
                <div class="railway">
                    <span>高速铁路：</span>
                    <span>653km</span>
                </div>
            </div>
            <div class="threeMsg">
                <div class="" v-for="(item,index) in threeMsg" :key="index">
                    <div>{{item.name}}</div>
                    <div>{{item.val}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const title = provide("title","交通情况");
        const threeMsg = [
            {name:'海运港口',val:'24个'},
            {name:'飞机航线',val:'105条'},
            {name:'民航机场',val:'4个'}
        ]
        
        onMounted(()=>{
            
        })
        return {
           threeMsg,
           title
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .rightThree
        .transState
            width:vw(364)
            height:vh(152)
            margin-top:vh(17)
            margin-bottom:vh(20)
            background : url('/data/images/hngk/trans.png') no-repeat
            background-size: 100% 100%
            padding-top:vh(20)
            .twoMsg
                display:flex
                justify-content : space-around
                margin-bottom:vh(31)
                .road
                    letter-spacing : vw(1)
                    span:nth-child(1)
                        color:#fff
                        font-size:vw(16)
                    span:nth-child(2)
                        color:#37DCFF
                        font-size:vw(16)
                .railway
                    letter-spacing : vw(1)
                    span:nth-child(1)
                        color:#fff
                        font-size:vw(16)
                    span:nth-child(2)
                        color:#37DCFF
                        font-size:vw(16)
            .threeMsg
                display:flex
                justify-content : space-around
                font-size:vw(16)
                letter-spacing : vw(1)
                text-align:center
                div 
                    div:nth-child(1)
                        margin-bottom:vh(26)
                    div:nth-child(2)
                        color:#FFBC32

                    

</style>